<template>
  <div class="recruit-container">
    <div class="recruit-header">
      <el-page-header @back="goBack" content="招聘简章表单" title="返回招聘简章列表"></el-page-header>
    </div>
    <div class="recruit-box">



      <el-card class="recruit-card">
        <el-form ref="recruit_form" :model="recruit"
                 :rules="rules" :show-message="false"
                 :hide-required-asterisk="true"
                 :validate-on-rule-change="false"
                 :inline="true" label-width="auto"
                 style="margin:2rem 20% 0 20%">

          <el-form-item label="招聘岗位" prop="orgId">
            <el-cascader
              placeholder="请选择组织"
              v-model="recruit.orgId"
              :options="options"
              @change="refresh">
            </el-cascader>
          </el-form-item>

          <el-form-item label="招聘人数" prop="numPeople">
            <el-input  v-model="recruit.numPeople"></el-input>
          </el-form-item>

          <el-form-item label="招聘内容" prop="jobContent">
            <el-input v-model="recruit.jobContent"  type="textarea" :rows="5"></el-input>
          </el-form-item>

          <el-form-item label="招聘条件"  prop="conditions">
            <el-input v-model="recruit.conditions" type="textarea" :rows="5"></el-input>
          </el-form-item>


          <el-form-item label="最低工资" prop="minSalary">
            <el-input  v-model="recruit.minSalary"></el-input>
          </el-form-item>

          <el-form-item label="最高工资" prop="maxSalary">
            <el-input  v-model="recruit.maxSalary"></el-input>
          </el-form-item>


          <el-form-item label="招聘发布时间范围">
            <el-date-picker v-model="rangeDate" type="daterange" range-separator="至"
                            start-placeholder="开始日期" end-placeholder="结束日期"
                            value-format="yyyy-MM-dd"
                            format="yyyy-MM-dd"
                            style="width:25rem"></el-date-picker>
          </el-form-item>


          <el-form-item>
            <el-button type="primary" style="margin-left:13rem " @click="create">{{ btn }}</el-button>
            <el-button @click="cancel" :disabled="btnFlag">取消</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
import {orgChart} from "@/api/organization";
import {editOrCreateRecruit, selectByIdRecruit} from "@/api/recruit";

export default {
  data(){
    return{
      id:'',
      recruit:{},
      options:[],
      rangeDate:[],
      rules:{
        orgId:[
          { required: true, message: '请选择组织', trigger: 'blur' },
        ],
        numPeople:[
          { required: true, message: '请输入招聘人数', trigger: 'blur' },
        ],
        jobContent:[
          { required: true, message: '请输入招聘信息', trigger: 'blur' },
        ],
        conditions:[
          { required: true, message: '请输入招聘条件', trigger: 'blur' },
        ],
        minSalary:[
          { required: true, message: '请输入招聘最小薪资', trigger: 'blur' },
        ],
        maxSalary:[
          { required: true, message: '请输入招聘最大薪资', trigger: 'blur' },
        ]
      },
      btn:'立即添加',
      btnFlag:false
    }
  },
  methods: {
    goBack(){
      this.$router.go(-1)
    },
    refresh(){
      this.$forceUpdate()
    },
    async selectOrg(){
      const {data:res} =await orgChart()
      this.options = res.org.children
    },
    recruitVo(){
      this.recruit.deptId = this.recruit.orgId[0]
      this.recruit.positionId = this.recruit.orgId[1]
      this.recruit.startTime = this.rangeDate[0]
      this.recruit.endTime = this.rangeDate[1]
    },
    create(){
      this.$refs.recruit_form.validate((valid) => {
        if (valid) {
          this.save()
        } else {
          this.$message({
            message: '数据校验未通过',
            type: 'warning'
          });
          return false;
        }
      })
    },
    async save() {
      this.recruitVo()
      const res = await editOrCreateRecruit(this.recruit)
      if (res.code === 200){
        this.$message({message: res.message, type: 'success'});
        this.$router.push({path:'/recruit/list'})
      }else {
        this.$message.error(res.message);
      }
    },
    async getByIdInfo(){
      const {data:res} = await selectByIdRecruit(this.id)
      this.recruit = res.data
      this.rangeDate = res.data.rangeDate
    },
    cancel(){
      this.recruit = {}
      this.rangeDate = []
      this.selectOrg()
    }
  },
  created() {
    this.id = this.$route.params.id
    if (typeof(this.id) != 'undefined'){
      this.getByIdInfo()
      this.btn = '立即更新'
      this.btnFlag = true
    }
    this.selectOrg()
  },

}
</script>

<style lang="scss" scoped>
$global_width: 100%;

.recruit{
  &-container{
    position:relative;
    width:100%;
    height:100%;
   // background-color:#fdfbfb
  }
  &-box{
    margin:3% 20% 0 20%
  }
  &-card{
    height: 100%;
    display: inline-block;
    .el-form--inline .el-form-item{
      padding-top:1rem;
      margin-right: 2rem;
    }
  }
}

.el-page-header{
  height:50px;
  line-height:50px;
  color:#928275 ;
  padding-left: 20px;
}

</style>

<style scoped>
::v-deep .el-input__inner{
  width:10rem;
  border-radius:10px
}
::v-deep .el-textarea__inner{
  width:22rem;
  border-radius:15px
}
</style>
